<template>
    <div class="home-page">
        <div>
            <p>{{ arr }}</p>
            <p>{{ obj }}</p>
            <p>{{ obj.name }}</p>
            <el-button @click="btnClick">toast</el-button>
        </div>
        <main>main...</main>
        <div>
            <p>上传</p>
            <Upload ref="upload" :tips="'支持文件格式：.rar .zip .doc .docx .pdf ，单个文件不能超过1mb'" :action="requestUrl" :fileName="'file'" :fileList="attachmentList" btnTxt="图片上传" :before-upload="beforeAvatarUpload" @success-callback="fileChange" @remove-callback="fileRemove" />
        </div>
        <div>
            <com-search></com-search>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Toast } from "@/utils";
import Upload from "@/components/Upload.vue";
import ComSearch from "@/components/ComSearch.vue";

console.log("this:", this);

const toast = Toast();

const arr = ref([1, 2, 3]);

const logImgUrl = ref("");

const obj = reactive({
    name: "wxy",
    age: 30,
    city: "黄冈市"
});

const requestUrl = ref(window.apibasrurl + "/api/works/upload/file");

const beforeAvatarUpload = files => {
    console.log(files);

    // 大小 200 * 200 格式 .jpg .png ，单个文件不能超过100kb
    if (files.type !== "image/jpeg") {
        ElMessage.error("Avatar picture must be JPG format!");
        return false;
    } else if (files.size / 1024 > 100) {
        ElMessage.error("单个文件不能超过100kb");
        return false;
    }
    // let image = new Image();
    // image.onload = function(){
    //     let relWdith = image.width,
    //     h = image.height;
    //     if(prorps.config.width==200 && prorps.config.height==200){
    //         pusfile(file)
    //         return
    //     }
    // 	ElMessage('请上传正确尺寸的文件')
    // }
    // image.src = data
    return true;
};

function fileChange(e) {
    console.log(e);
    logImgUrl.value = e.url;
}

function fileRemove() {
    logImgUrl.value = "";
}

onMounted(async () => {
    await init();
    console.log("mounted...");
    console.log(arr);
    console.log(obj);
});

function init() {
    console.log("init...");
}

function btnClick() {
    toast.success("okk...");
}
</script>
